<template>
  <div class="pb-select-tag">
    <div class="flex items-center">
      <el-popover ref="popover" :width="'60%'" placement="bottom-start" trigger="click" :hide-after="10" @show="onShow"
        :fallback-placements="['bottom', 'top-start', 'right-start', 'left-start']" @hide="showSelect = false"
        v-if="status == 'updata'">
        <template #reference>
          <div class="select-box" @click.stop="showSelect = !showSelect">
            <div class="flex items-center" v-if="excelDta.skuName">
              <span :key="index" class="mater-css mr-1" style="background: var(--pb-color-primary-light-1)">
                {{ excelDta.skuName }}
              </span>
              <pb-icon name="small-bottom" size="16" v-if="isSelect"></pb-icon>
            </div>
            <div v-else style="width: 60px;">
              <p class="placeholder" :style="{ color: check ? '' : red }">请选择</p>
              <pb-icon name="small-bottom" size="16" v-if="isSelect"></pb-icon>
            </div>
          </div>
        </template>
        <div class="select-card">
          <el-form-item>
            <pb-input v-model="searchForm.searchKey" @input="excelChange" placeholder="商品名称，编码，助记码"></pb-input>
          </el-form-item>
          <pb-table :loading="tableloading" :tableData="tableList" style="border-radius: 4px" @cellClick="cellClick"
            :bottomElement="['pb-page']" height="400" :column="dishColumn">
            <template #roi="{ row }">
              <div class="flex justify-end">
                {{ row.roi }}%
              </div>
            </template>
          </pb-table>
        </div>
      </el-popover>
      <div v-else>
        <div class="flex items-center" v-if="excelDta.skuName">
          <span :key="index" class="mater-css mr-1" style="background: var(--pb-color-primary-light-1)">
            {{ excelDta.skuName }}
          </span>
          <!-- <pb-icon name="small-bottom" size="16" v-if="isSelect"></pb-icon> -->
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
/**
 * @param List 标签列表
 * @param defaultProps 默认参数
 * @param checkList 已选择的列表
 * @param isSingle 是否是单选
 */
import { GetNewestChaseSkuSupplyListApi } from '@/api/Purchasing'
const props = defineProps({
  excelDta: {
    type: Object,
    default: {},
  },
  checkType: {
    type: Object,
    default: []
  },
  dishTasteArr: {
    type: Object,
    default: []
  },
  dishSkillArr: {
    type: Object,
    default: []
  },
  materialCategoryArr: {
    type: Object,
    default: []
  },
  useScopeAttributeId: {
    type: Number,
    default: 0
  },

  isSelect: {
    type: Boolean,
    default: true,
  },
  planType: {
    type: String,
    default: ''
  },
  status: {
    type: String,
    default: ''
  }
});
// 校验
const searchForm = reactive({
  searchKey: ''
})
const excelChange = () => {
  getListFn()
}
const tableList = ref([])
const tableloading = ref(false)
const emits = defineEmits(["changeExcel"]);
const popover = ref(null)
const showSelect = ref(false);
const dishColumn = [
  {
    key: "skuName",
    name: "商品名称",
  },
  {
    key: "skuClassName",
    name: "商品种类",
  },
  {
    key: "price",
    name: "单价(元)",
    align: 'right'
  },
  {
    key: 'accountingUnitName',
    name: "计量单位",
  }, {
    key: 'specifications',
    name: "规格",
  }, {
    key: 'smallOrderQuantity',
    name: "最小订货数量",
    align: 'right'
  }, {
    key: 'orderQuantization',
    name: '订货取整',
    align: 'right'
  }, {
    key: 'unitWeight',
    name: "单位重量/(kg)",
    align: 'right'
  }
]
const getListFn = () => {
  tableloading.value = true
  GetNewestChaseSkuSupplyListApi({
    // currentPage: 1,
    // purchaseType: props.planType,
    pageSize: -1,
    combineCondition: searchForm.searchKey
  }).then(res => {
    tableList.value = res.data.records
    tableloading.value = false
  }).catch(err => {
    tableloading.value = false
  })
}
const dishList = ref([])
// 打开时需要重新赋值
const onShow = () => {
  searchForm.searchKey = ''
  getListFn()
  showSelect.value = true
  // getRecipeDishApi()
}
// 点击替换
const cellClick = (row) => {
  // console.log(row, '222')
  popover.value.hide()
  row.purchaseQuantity = 0
  row.isFlge = true
  emits('changeExcel', row)

}
const getRecipeDishApi = async () => {
}
// defineExpose({ checkRule })
</script>

<style lang="scss" scoped>
:v-deep .el-input__inner {
  border-radius: 0px;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  /*outline: medium;*/
}

.select-box {
  cursor: pointer;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag-css {
  padding: 2px 5px;
  border-radius: 2px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

.placeholder {
  display: inline-block;
  width: 45px;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.25);
  line-height: 22px;
}

.danger {
  color: var(--pb-color-danger);
}



.mater-css {
  line-height: 23px;
  padding: 2px 5px;
  border-radius: 2px;
  border: 1px solid var(--pb-color-primary-light-5);
  color: var(--pb-color-primary);
}
</style>
